<template>
  <el-card shadow="always" class="card">
    <div slot="header" class="clearfix">
      <span>{{ name }}</span>
      <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible = true">删除学生</el-button>
      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <span>是否将{{ name }}移出你的管理</span>
        <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="dialogVisible = false; deleteStudent(twsid)">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div class="block">
      <el-avatar :size="50" ></el-avatar>
      <span>{{id}}</span>
    </div>

  </el-card>
</template>

<script>
import axios from "axios";
export default {
  name: "StudentCard",
  data() {
    return {
      dialogVisible: false
    }
  },
  props: ['id', 'name','twsid'],
  methods: {
    deleteStudent(id) {
      //todo 对相应id的学生进行删除操作,并且要刷新一次数据流的状态
      console.log('删除twsid为' + id + '学生')
      axios
          .delete(`teacher/deleteStudent/${id}`)
          .then(response => {
            console.log(response.data)
            this.$store.dispatch("flashDataForTeacher_student")
          })
          .catch(e => {
            console.log(e)
          })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          //eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          //eslint-disable-next-line no-unused-vars
          .catch(_ => {
          });
    }
  },
}
</script>

<style scoped>
.card {
  width: 300px;
  height: 150px;
  margin: 10px;
}


.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.block{
  display: flex;
  align-items:center;
  justify-content: space-around;
}
</style>